<template>
  <div class="login-wrap">
    <div class="ms-login">
      <h3 class="title">登录</h3>

      <!--      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">-->
      <!--        <el-form-item prop="username">-->
      <!--          <el-input-->
      <!--            v-model="loginForm.username"-->
      <!--            type="text"-->
      <!--            auto-complete="off"-->
      <!--            :placeholder="$t('login.account')"-->
      <!--          >-->
      <!--            <template #prefix>-->
      <!--              <svg-icon name="user" class="input-icon" />-->
      <!--            </template>-->
      <!--          </el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item prop="password">-->
      <!--          <el-input-->
      <!--            v-model="loginForm.password"-->
      <!--            show-password-->
      <!--            type="password"-->
      <!--            auto-complete="off"-->
      <!--            :placeholder="$t('login.password')"-->
      <!--            @keyup.enter="handleLogin"-->
      <!--          >-->
      <!--            <template #prefix>-->
      <!--              <svg-icon name="password" class="input-icon" />-->
      <!--            </template>-->
      <!--          </el-input>-->
      <!--        </el-form-item>-->

      <!--        <el-form-item-->
      <!--          style="width: 100%"-->
      <!--          :style="{ 'margin-top': captchaOnOff == 'off' ? '40px' : '' }"-->
      <!--        >-->
      <!--          <el-button-->
      <!--            :loading="loading"-->
      <!--            size="default"-->
      <!--            round-->
      <!--            type="primary"-->
      <!--            style="width: 100%"-->
      <!--            @click.prevent="handleLogin"-->
      <!--          >-->
      <!--            <span v-if="!loading">{{ $t('login.btnLogin') }}</span>-->
      <!--            <span v-else>登 录 中...</span>-->
      <!--          </el-button>-->
      <!--        </el-form-item>-->

      <!--        <div style="display: flex; justify-content: space-between; align-items: center">-->
      <!--          <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>-->
      <!--          <span style="font-size: 12px">-->
      <!--            <router-link class="link-type" :to="'/register'">{{-->
      <!--              $t('login.register')-->
      <!--            }}</router-link>-->
      <!--            <span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span>-->
      <!--          </span>-->
      <!--        </div>-->
      <!--      </el-form>-->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginRef"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="username">
            <template #prepend>
              <el-button :icon="User"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="password"
            v-model="loginForm.password"
            @keyup.enter="handleLogin"
          >
            <template #prepend>
              <el-button :icon="Lock"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </div>
        <!--        <el-checkbox class="login-tips" v-model="checked" label="记住密码" size="large" />-->
        <div style="display: flex; justify-content: space-between; align-items: center">
          <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
          <span style="font-size: 12px">
            <router-link class="link-type" :to="'/register'">{{
              $t('login.register')
            }}</router-link>
            <span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span>
          </span>
        </div>
      </el-form>
    </div>
  </div>
  <starBackground></starBackground>
</template>
<script lang="ts" setup>
// 验证码开关
import { UserControllerService } from '../../../generated'
import starBackground from '@/components/Login/starBackground.vue'
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const captchaOnOff = ref('')
const loading = ref(false)
const loginForm = ref({
  username: '',
  password: '',
  rememberMe: false,
  code: '',
  uuid: ''
})
const userStore = useUserStore()

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}

/**
 * 登录
 * 根据登录的用户信息 -> 跳转不同界面
 */
async function handleLogin() {


  const res = {
    userAccount: loginForm.value.username,
    userPassword: loginForm.value.password
  }
  const tes = await UserControllerService.userLoginUsingPost(res)

  if (tes.code === 0) {
    console.log('登录成功', tes.data)
    await userStore.getLoginUser()
    await userStore.getUserNoRead()
    ElMessage({
      showClose: true,
      message: '登录成功',
      type: 'success'
    })

    if(userStore.getUserRole==="company"){
     await router.push({
        path: '/'
      })
     }else if(userStore.getUserRole==="admin"){
      await router.push({
        path: '/admin/usermanage'
      })
    }else if(userStore.getUserRole==="agency"){
      await router.push({
        path: '/admin/supervis'
      })
    }else if(userStore.getUserRole==="DataAuditor"){
      await router.push({
        path: '/admin/audit'
      })
    }else{
      await router.push({
        path: '/'
      })
    }

  } else {
    ElMessage({
      showClose: true,
      message: tes.message,
      type: 'error'
    })
  }
}

function handleForgetPwd() {
  console.log('忘记密码')
}
</script>
<style lang="scss" scoped>
@import '../../assets/styles/login';

.forget-pwd {
  color: #ccc;
  margin-left: 10px;
  cursor: pointer;
  border-left: 1px solid;
  padding-left: 10px;
}

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  //background-image: url(src/assets/cool-background.png);
  background-size: 100%;
}

.ms-title {
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #333;
  font-weight: bold;
  padding-top: 10px;
}

.ms-login {
  width: 350px;
  border-radius: 5px;
  background: #fff;
}

.ms-content {
  padding: 10px 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #333;
}
</style>
